<template>
  <div class="setting-profile setting-content">
    <h3>个人资料</h3>
    <a-form-model
      ref="basicInfoForm"
      :model="basicInfoForm"
      :rules="rules"
      layout="horizontal"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 20 }"
      :colon="false"
      label-align="right"
      @submit.native.prevent
    >
      <div class="static-label">
        <p>用户ID</p>
        <span>{{ userInfo.id }}</span>
      </div>
      <a-form-model-item label="昵称" prop="nickname">
        <a-input
          v-model="basicInfoForm.nickname"
          size="large"
          placeholder="请输入昵称"
          :maxLength="32"
        >
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="头像" style="margin-bottom: 2px">
        <a-upload
          name="file"
          supportServerRender
          class="avatar-uploader"
          list-type="picture-card"
          :show-upload-list="false"
          action="https://image.zdxblog.cn/upload/uploadFile"
          :before-upload="beforeImageUpload"
          @change="handleChange"
        >
          <img
            v-if="basicInfoForm.avatar"
            :src="basicInfoForm.avatar"
            alt="avatar"
          />
          <div v-else>
            <i v-if="!loading" class="ri-landscape-line"></i>
            <a-icon v-else type="loading" />
            <div class="ant-upload-text">upload</div>
          </div>
        </a-upload>
        <p class="tip">格式：支持JPG、PNG、JPEG、SVG、GIF 大小：5M以内</p>
      </a-form-model-item>
      <a-form-model-item label="性别" style="margin-bottom: 6px;">
        <a-radio-group v-model="basicInfoForm.gender" name="gender">
          <a-radio value="1">男</a-radio>
          <a-radio value="0">女</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="出生日期" prop="birthday">
        <a-date-picker
          v-model="basicInfoForm.birthday"
          placeholder="请选择出生日期"
          valueFormat="YYYY-MM-DD"
          size="large"
          :disabled="userInfo.hasUpdateBirthday" />
      </a-form-model-item>
      <a-form-model-item label="个人主页">
        <a-input
          v-model="basicInfoForm.blogAddress"
          size="large"
          placeholder="请输入个人主页"
          :maxLength="255"
        >
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="开始工作" prop="startWorkTime">
        <a-month-picker
          v-model="basicInfoForm.startWorkTime"
          placeholder="请选择开始工作日期"
          valueFormat="YYYY-MM"
          size="large" />
      </a-form-model-item>
      <a-form-model-item label="职位">
        <a-input
          v-model="basicInfoForm.job"
          size="large"
          placeholder="请输入职位"
          :maxLength="50"
        >
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="个人介绍">
        <a-textarea
          v-model="basicInfoForm.description"
          size="large"
          placeholder="请输入个人介绍"
          :autoSize="{ minRows: 4, maxRows: 4 }"
          resize="none"
          :maxLength="255"
        >
        </a-textarea>
      </a-form-model-item>
      <div class="save-btn" @click="handleSubmit">
        <a-button type="dashed">立即保存</a-button>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { ruleRequired } from '@/util/rule'

export default {
  name: 'ProfilePage',
  asyncData ({ store }) {
    const userInfo = store.state.userInfo
    const { nickname, job, avatar, blogAddress, description, gender, birthday, startWorkTime } = userInfo
    return {
      basicInfoForm: {
        nickname,
        job,
        avatar,
        blogAddress,
        description,
        gender,
        birthday,
        startWorkTime
      },
      loading: false
    }
  },

  data () {
    return {
      basicInfoForm: {},
      loading: false,
      rules: {
        nickname: [ruleRequired('请输入昵称')],
        birthday: [ruleRequired('请选择出生日期')]
      }
    }
  },

  head () {
    return {
      title: this.userInfo.nickname + '个人资料修改',
      meta: [
        { charset: 'utf-8' },
        {
          hid: 'description',
          name: 'description',
          content: this.userInfo.nickname + '个人资料修改'
        }
      ]
    }
  },

  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },

  methods: {
    async handleSubmit () {
      try {
        const valid = await this.$refs.basicInfoForm.validate()
        if (!valid) return
        await this.$axios.post('/gimishare/api/v1/users/updateuser', this.basicInfoForm)
        this.$message.success('更新资料成功')
        const { data } = await this.$axios.get('/gimishare/api/v1/users/sessionuserinfo')
        this.$store.commit('UPDATE_USER_INFO', data)
      } catch (error) {
        console.log(error)
      }
    },

    beforeImageUpload (file) {
      const fileType = file.name
        .substring(file.name.lastIndexOf('.') + 1)
        .toLowerCase()
      if (!['jpeg', 'jpg', 'svg', 'gif', 'png', 'apng', 'webp', 'awebp'].includes(fileType)) {
        this.$message.error('上传图片格式不正确')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('上传头图片大小不能超过 5MB!')
        return false
      }
      return true
    },

    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.basicInfoForm.avatar = info.file.response.data
        this.loading = false
      }
      if (info.file.status === 'error') {
        this.$message.error('上传图片失败')
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="less">
.setting-profile {
  .static-label {
    display: flex;
    color: #999;
    padding: 12px 0;
    p {
      width: 78px;
      text-align: right;
      padding-right: 10px;
    }
  }
  .ant-form-horizontal {
    padding: 30px;
    width: 80%;
    .save-btn {
      padding: 0 78px;
      margin-top: 30px;
    }
    ::v-deep {
      .ant-form-item {
        margin-bottom: 18px;
        .ant-input {
          border-radius: 4px;
          border-color: transparent;
          background: #f2f3f5;
          box-shadow: none;
          &:focus {
            border-color: var(--primary-color);
          }
        }
        .ant-calendar-picker {
          display: block;
        }
        .ant-form-explain {
          font-size: 11px;
          position: absolute;
        }
        .tip {
          font-size: 10px;
          margin-top: 2px;
          color: #999;
          line-height: 16px;
        }
      }
    }
    ::v-deep .avatar-uploader > {
      display: block;
      & > .ant-upload {
        width: 66px;
        height: 66px;
        margin: 0;
        padding: 6px;
        .ant-upload {
          padding: 0;
          img {
            height: 100%;
            object-fit: cover;
            height: 100%;
          }
        }
      }
    }
    ::v-deep .ant-upload-select-picture-card i {
      font-size: 18px;
      color: #999;
    }
    ::v-deep .ant-upload-select-picture-card .ant-upload-text {
      margin-top: -6px;
      color: #666;
      font-size: 12px;
    }
  }
}
</style>
